// ** React Imports
import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

export default () => {
  const charRef = useRef(null)

  useEffect(() => {
    initChart()
  }, [])

  const initChart = () => {
    const chart = echarts.init(charRef.current)

    chart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          show: true,
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['一号线', '二号线', '三号线', '四号线', '五号线', '六号线'],
        axisLine: { lineStyle: { color: '#95f3f5' } },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: { lineStyle: { color: '#95f3f5' } },
      },
      series: [
        {
          data: [0.92, 0.87, 0.94, 0.97, 0.83, 0.76],
          type: 'line',
          itemStyle: {
            normal: {
              areaStyle: { type: 'default' },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#56ada1' },
                { offset: 0.5, color: 'rgba(98, 184, 198, 0.3)' },
                { offset: 1, color: 'rgba(98, 184, 198, 0.1)' },
              ]),
              borderColor: '#6fdfb4', //拐点边框颜色
              borderWidth: 2, //拐点边框大小
            },
          },
          smooth: true,
        },
      ],
    })
  }
  return (
    <div className="left-two">
      <div className="box-title">各生产线一次通过率(每周)</div>
      <div className="box-content  dis-flex" style={{ height: '300px' }}>
        <div
          className="char flex1"
          ref={charRef}
          style={{ height: '100%', width: '100%' }}
        ></div>
      </div>
    </div>
  )
}
